<template>
  <div class="body">
    <div class="stars">
      <div v-for="(item, index) in startsCount" :key="index" class="star" ref="star">
        
      </div>
    </div>
    <div class="box">
      <h2>Login</h2>
          <el-form
            :model="ruleForm"
            :rules="Formrules"
            ref="ruleFormref"
            label-width="0px"
            class="login_form"
          >
            <el-form-item prop="username">
              <el-input
                placeholder="用户名"
                v-model="ruleForm.username"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                placeholder="密码"
                v-model="ruleForm.password"
                prefix-icon="el-icon-lock"
                type="password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" @click="submitForm">登录</el-button>
              <el-button type="info" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>
<script>
  import main from '../main'

  export default {
      data() {
          return {
              ruleForm: {
                  username: '',
                  password: ''
              },
              Formrules: {
                  username: [
                  { required: true, message: '请输入用户名称', trigger: 'blur' },
                  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
                  password: [
                  { required: true, message: '请输入用户密码', trigger: 'blur' },
                  { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
                  ]
              },
              startsCount: 800, //星星数量
              distance: 800, //间距
          }
      },
      mounted() {
        let _this =this
        let starArr = _this.$refs.star
        console.log(starArr)
        starArr.forEach(item => {
          var speed = 0.2 +(Math.random() * 1);
          var thisDistance = _this.distance + (Math.random() * 300);
          item.style.transformOrigin = `0 0 ${thisDistance}px`;
          item.style.transform = `translate3d(0,0,-${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed},${speed})`
        });
      },
      created() {
        
      },
      methods: {
          resetForm() {
              // console.log(this)
              // this.$refs[formName].resetFields();
              this.$refs.ruleFormref.resetFields()
          },
          submitForm() {
              window.sessionStorage.setItem('activePath', null)
              window.sessionStorage.setItem('username', null)
              this.$refs.ruleFormref.validate(async valid => {
              if (!valid) return
              
              const {data: res}= await this.$http.get('http://127.0.0.1:8181/user/findUser/' + this.ruleForm.username + '/' + this.ruleForm.password)
              if (res[0] == undefined) return this.$message.error('登录失败！')
                this.$message.success('登录成功！')
                window.sessionStorage.setItem('token', res[0].token)
                if (res[0].role == true) {
                  this.$router.push('./home')
                }else{
                  this.$router.push('./user')
                  window.sessionStorage.setItem('username', this.ruleForm.username)
                }
                
                
          })
        
      }
      }
  }
</script>

<style lang="less" scoped>
.body{
  height: 100%;
  width: 100%;
  position: fixed;
  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92,#1b2947);
  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%,#e96f92 65%, #f7f7b6);
  background-attachment: fixed;
  overflow: hidden;
}

@keyframes rotats {
  0%{
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100%{
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
.stars{
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: rotats 90s infinite linear;
  bottom: 0;
}
.star{
  width: 2px;
  height: 2px;
  background: #f7f7b8;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 40px;
  background: rgba(0, 0, 0, .2);
  box-sizing: border-box;
  box-shadow:  0 15px 25px rgba(0, 0, 0, .5);
  border-radius: 10px;
}
.box h2{
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}
</style>